<script setup lang="ts">
import { ref } from 'vue'
import UserLogin from '@/views/user/components/UserLogin.vue'
import UserRegister from '@/views/user/components/UserRegister.vue'

const text = ref('注册')

const changeText = () => {
  if (text.value === '注册') {
    text.value = '登录'
  } else {
    text.value = '注册'
  }
}

</script>

<template>
  <div class="user">
    <div class="main shadow-lg">
      <div class="bg">
        <img src="@/assets/image/bg.png" alt="">
      </div>
      <div class="input">
        <div class="title">
          欢迎来到班级管理系统
        </div>
        <div class="content">
          <div class="loginView" v-if="text === '注册'">
            <UserLogin />
          </div>
          <div v-else>
            <UserRegister />
          </div>
        </div>
        <div class="footer">
          <div class="login" @click="changeText()">
            <div v-if="text === '注册'">
              没有账号？点我去
            </div>
            <div v-else>
              已有账号？去
            </div>
            {{ text }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.user {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png") 0% 0% / 100% 100%;
  .main {
    width: 55%;
    height: 60%;
    display: flex;
    border-radius: 12px;

    .bg {
      width: 50%;
      height: 100%;


      img {
        height: 100%;
        width: 100%;
        border-radius: 12px;
      }
    }

    .input {
      width: 50%;
      display: flex;
      flex-direction: column;
      height: 100%;
      background: white;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      .title{
        padding-bottom: 20px;
        font-size: 33px;
      }
      .content{
        width: 70%;
      }
      .footer{
        display: flex;
        justify-content: space-between;
        width: 70%;
        .login{
          display: flex;
          font-size: 14px;
          color: #A6A6A6;
          cursor: pointer;
          margin-left: auto;
        }
      }
    }
  }
}
</style>
